<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 150px;
				height: 300px;
				background: red;
				position: fixed;
				left: -150px;
				top: 100px;
			}
			#side {
				width: 30px;
				height: 60px;
				text-align: center;
				line-height: 20px;
				color: white;
				position: absolute;
				background: black;
				right: -30px;
				top: 120px;
				cursor: pointer;
			}
			#oImg {
				width: 200px;
				position: absolute;
				left: 200px;
				opacity: 0.3;
				/*abc:"呵呵";*/
				filter:alpha(opacity=30);
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			<div id="side">分享到</div>
		</div>
		<img src="00.jpg" alt="" id="oImg"/>
	</body>
	<script type="text/javascript">
		
		var oBox = document.getElementById("box");
		var oImg = document.getElementById("oImg");
		/*var timer = null;
*/		
		
		oBox.onmouseover = function() {
			
			bigStartMove(this,"left",10,0)
		}
		
		// 进行合并
		function bigStartMove(obj,attr,speed,target) {
			
			clearInterval(obj.timer);
			var cur = 0;
			obj.timer = setInterval(function(){
				//通过判断attr属性是什么 如果传入的属性是透明度 说明你一定是要让透明度运动
				if(attr == "opacity") {
					cur = Math.round(getStyle(obj,attr)*100);
				}else {
					cur = parseFloat(getStyle(obj,attr));
				}
				
				
				if(cur == target) {
					
					clearInterval(obj.timer);
					obj.timer = null;
				}else{
					if(attr == "opacity") {
						obj.style.opacity = (cur + speed)/100 ;
						obj.style.filter = 'alpha(opacity='+ (cur + speed) +')';
					}else{
						obj.style[attr] = cur + speed + "px";
					}
					
					
				}
				
				
			},30);
			
		}
		
		
		
		function getStyle(obj,attr) {
			return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
		}
		oBox.onmouseout = function() {
			
			bigStartMove(this,"left",-10,-150)
		}
		
		// 把鼠标移到图片上面 让图片透明度变成1
		oImg.onmouseover = function() {
			
			bigStartMove(this,"opacity",10,100);
			//alert(getStyle(oImg,"abc"));
		}
		oImg.onmouseout = function() {
			
			bigStartMove(this,"opacity",-10,30);
			//alert(getStyle(oImg,"abc"));
		}
	</script>
</html>
